<template>
	<view class="page_box">
		<view class="head_box">
			<!-- tab -->
			<view class="order-nav u-flex">
				<view class="nav-item u-flex-col u-flex-1 u-col-center" v-for="nav in orderState" :key="nav.id" @tap="onNav(nav)">
					<view class="item-title" :class="{ 'title-active': orderType === nav.type }">{{ nav.title }}</view>
				</view>
			</view>
		</view>

		<view class="content_box">
			<scroll-view scroll-y="true" enable-back-to-top @scrolltolower="loadMore" class="scroll-box">
				<block >
					<!-- 订单列表 -->
					<view class="order-list" v-for="(order, orderIndex) in orderList" :key="order.id" @tap.stop="jump('/pages/order/cate/cateGoodDetail', { id: order.id })">
						<view class="order-head u-flex u-row-between">
							<text class="no">订单号：{{ order.order_sn }}</text>
							<text v-if="order.status === 0" class="status">等待买家付款</text>
							<text v-if="order.status === 1&&order.aftersale_status === null" class="status">待使用</text>
              <text v-if="order.status === 1&&order.aftersale_status === 0" class="status">待处理</text>
              <text v-if="order.status === 1&&(order.aftersale_status === -1||order.aftersale_status === 1)" class="status">已处理</text>
							<text v-if="order.status === 2" class="status">已完成</text>
						</view>
						<view class="order-content" >
							<image class="goods_img"  lazy-load fade-show :src="order.shop.images[0]" mode="aspectFill"></image>
							<view class="goods-intro">
								<view class="row">
									<view class="goods-title">{{order.shop.shop_name}}</view>
									<view class="goods-price">￥{{ order.cash_money }}</view>
								</view>
								<view class="row">
									<view class="goods_sku">{{ order.goods_title }}</view>
									 <view class="goods-num">X{{ order.goods_num || 0 }}</view>
								</view>
							</view>
						</view>
						<view class="order-bottom">
							<view class="all-msg u-flex font-OPPOSANS">
								实付款：<view class="all-money font-OPPOSANS">￥{{ order.cash_money }}</view>
							</view>

							<!-- 按钮 -->
							<view class="btn-box u-flex" >
								<!-- status=0是未付款 1已付款 2已完成 -1订单已经取消的 -->
									<button v-if="order.status === 0 " @tap.stop="onCancel(order.id, orderIndex)" class="obtn u-reset-button">取消订单</button>
                  <button v-if="order.status === -1 " class="obtn u-reset-button">订单已取消</button>
									<button v-if="order.status === 0 " @tap.stop="toPay(order,orderIndex)" class="obtn u-reset-button obtn3">付款</button>
									<button v-if="order.status !==0 &&order.status !==-1  && !order.aftersale_status" @tap.stop="onCancelAfterSale(order.id,orderIndex)" class="obtn u-reset-button obtn3">申请退款</button>
									<button v-if="order.status === 1  && order.aftersale_status=== 0" @tap.stop="jump('/pages/order/cate/cateGoodDetail', { id: order.id })" class="obtn u-reset-button obtn3">查看进度</button>
                  <button v-if="order.status === 1  && (order.aftersale_status === -1||order.aftersale_status === 1)" @tap.stop="jump('/pages/order/cate/cateGoodDetail', { id: order.id })" class="obtn u-reset-button obtn3">查看结果</button>
									<button v-if="order.status ===2 && order.is_comment===0" @tap.stop="onComment(order.id)" class="obtn u-reset-button obtn3">待评价</button>
									<button v-if="order.status ===2 && order.is_comment===1" @tap.stop="onComment(order.id,true)" class="obtn u-reset-button obtn3">查看评价</button>
						<!--
									<button v-if="order.status === 2" @tap.stop="onDelete(order.id, orderIndex)" class="obtn u-reset-button">删除订单</button>
									<button v-if="order.status === 2" @tap.stop="onExpress(order.id, orderIndex)" class="obtn u-reset-button">查看物流</button> -->

							</view>
						</view>
					</view>

				</block>

				<!-- 空白页 -->
				<shopro-empty v-if="isEmpty" :image="$IMG_URL + '/imgs/empty/empty_groupon.png'" tipText="暂无商品，还有更多好货等着你噢~"></shopro-empty>
				<!-- 更多 -->
				<u-loadmore v-show="orderList.length" height="80rpx" :status="loadStatus" icon-type="flower" color="#ccc" />
			</scroll-view>
		</view>
	</view>
</template>

<script>
	import https from '@/shopro/requests/index'
	import { mapMutations, mapActions, mapState, mapGetters } from 'vuex';

export default {
	components: {},
	data() {
		return {
			isEmpty: false,
			loadStatus: 'loadmore', //loadmore-加载前的状态，loading-加载中的状态，nomore-没有更多的状态
			currentPage: 1,
			lastPage: 1,
			activeType:{},
			orderType: 'all',
			orderList: [],
			orderState: [
				{
					id: 0,
					title: '全部',
					type: 'all',
					status:''
				},
				{
					id: 1,
					title: '待付款',
					type: 'nopay',
					status:0
				},
				{
					id: 2,
					title: '待使用',
					type: 'nouser',
					status:1
				},
				{
					id: 3,
					title: '待评价',
					type: 'nocomment',
					status:2
				},
				{
					id: 4,
					title: '退款/售后',
					type: 'affte_sale',
					status:1
				}
			]
		};
	},
	onLoad(option) {
		if (this.$Route.query.type) {
			this.orderType = this.$Route.query.type;
		}
	},
	onShow() {
		this.orderList = [];
		this.currentPage = 1;
		this.lastPage = 1;
		this.getOrderList();
	},
	computed: {
		...mapGetters(['userInfo']),
	},
	methods: {
		jump(path, parmas) {
			this.$Router.push({
				path: path,
				query: parmas
			});
		},
		onComment(orderId,isComment) {
			this.jump('/pages/order/cate/add-comment', { orderId: orderId , isComment:isComment});
		},
		// tab切换
		onNav(nav) {
				this.activeType = nav
				this.orderType = nav.type;
				this.orderList = [];
				this.currentPage = 1;
				this.lastPage = 1;
				this.getOrderList();
				// if(this.orderType=='affte_sale'){
				// 	this.getAftersaleList();
				// }else{
				// 	this.getOrderList();
				// }
		},

		// 订单列表
		getOrderList() {
			let that = this;
			that.loadStatus = 'loading';
			let params ={
				user_id:this.userInfo.id
			}
			if(that.activeType.type !== 'all'){
				params.status= that.activeType.status
			}
			if(that.activeType.type === 'nocomment'){
				params.is_comment = 0
			}else if(that.activeType.type === 'affte_sale'){
				params.aftersale_status = 3
			}

			https('common.cate_list', params, '加载中...').then(res => {
				if (res.code === 1) {
					that.orderList = [...that.orderList, ...res.data.data];
					that.isEmpty = !that.orderList.length;
					that.lastPage = res.data.last_page;
					that.loadStatus = that.currentPage < res.data.last_page ? 'loadmore' : 'nomore';
				}
			});
		},


		// 加载更多
		loadMore() {
			if (this.currentPage < this.lastPage) {
				this.currentPage += 1;
				if(this.orderType=='affte_sale'){
					this.getAftersaleList();
				}else{
					this.getOrderList();
				}
			}
		},



		// 取消订单
		onCancel(id, orderIndex) {
			let that = this;
			uni.showModal({
				title: '取消确认',
				content: '是否确定取消该订单？',
				cancelText: '取消',
				confirmText: '确定',
				success: res => {
					if (res.confirm) {
						https('common.cate_cancel', {
							order_id : id
						},
						'取消中...'
						).then(res => {
							if (res.code === 1) {
								uni.showToast({
									title: "取消订单成功",
									icon: "success"
								})
                this.orderList = [];
                this.currentPage = 1;
                this.lastPage = 1;
								this.getOrderList();
							}
						});
					}
				}
			});


		},
			toPay(order,orderIndex) {
				var that = this;
				https('common.cate_order', {
					cash_money: order.cash_money,
					goods_id: order.goods_id,
					store_shop_id: order.store_shop_id,
					goods_num: 1,
          order_sn:order.id,
				}, '加载中...').then(res => {
					if (res.code === 1) {
						uni.requestPayment({
							provider: 'wxpay',
							timeStamp: res.data.timeStamp,
							nonceStr: res.data.nonceStr,
							package: res.data.package,
							signType: res.data.signType,
							paySign: res.data.paySign,
							success: (payRes) => {
								this.$u.toast(res.msg);
                this.orderList = [];
                this.currentPage = 1;
                this.lastPage = 1;
								this.getOrderList();
							},
							fail: () => {
								this.$u.toast('支付失败，请重试')
							}
						})
					}else{
            this.orderList = [];
            this.currentPage = 1;
            this.lastPage = 1;
            this.getOrderList();
          }
				});
			},

		//取消售后
		onCancelAfterSale(aftersaleId, orderIndex) {
			let that = this;
			uni.showModal({
				title: '退款确认',
				content: '是否确定申请退款？',
				cancelText: '取消',
				confirmText: '确定',
				success: res => {
					if (res.confirm) {
						https(
							'common.cate_afterSales',
							{
								order_id: aftersaleId
							},
							'加载中...'
						).then(res => {
							if (res.code === 1) {
								uni.showModal({
								    title: '退款提示',
								    content: '退款正在审核，请等待',
								    success: function (res) {
                      this.orderList = [];
                      this.currentPage = 1;
                      this.lastPage = 1;
								        if (res.confirm) {
								            that.getOrderList();
								        } else if (res.cancel) {
								            that.getOrderList();
								        }
								    }
								});
							}
						});
					}
				}
			});
		},

		// 删除售后
		onDeleteAfterSale(aftersaleId, orderIndex) {
			let that = this;
			uni.showModal({
				title: '删除确认',
				content: '是否删除该订单？',
				cancelText: '取消',
				confirmText: '确定',
				success: res => {
					if (res.confirm) {
						that.$http(
							'order.deleteAftersaleOrder',
							{
								id: aftersaleId
							},
							'删除中...'
						).then(res => {
							if (res.code === 1) {
								this.$u.toast(res.msg);
								this.orderList.splice(orderIndex, 1);
							}
						});
					}
				}
			});
		},
	}
};
</script>

<style>
	page{
		background-color: #F8F8F8;
	}
</style>
<style lang="scss">
.order-nav {
	// background: #fff;
	height: 88rpx;

	.nav-item {
		flex: 1;

		.item-title {
			font-size: 28rpx;
			font-weight: 500;
			color: #666666;
			line-height: 88rpx;
		}

		.title-active{
			font-family: PingFang SC-Bold, PingFang SC;
			font-weight: bold;
			color: #FC5351;
		}
	}
}

.order-list {
	background: #fff;
	margin: 0 24rpx 24rpx;
	padding-bottom: 40rpx;
	border-radius: 16rpx;

	.order-bottom {
		.serve-status {
			height: 94rpx;
			background: rgba(246, 246, 246, 1);
			border-radius: 4rpx;
			margin: 0 20rpx 20rpx;
			padding: 0 20rpx;
			.serve-title {
				font-size: 26rpx;

				font-weight: 500;
				color: rgba(51, 51, 51, 1);
				margin-right: 30rpx;
			}
			.serve-content {
				font-size: 20rpx;

				font-weight: 400;
				color: rgba(102, 102, 102, 1);
			}
		}

		.btn-box {
			justify-content: flex-end;

			button{
				margin: 0 20rpx 0 0;
				padding: 0;
			}
		}
		.all-msg {
			// font-size: 24rpx;
			// color: #999;
			font-size: 28rpx;
			font-weight: 500;
			color: #333333;
			justify-content: flex-end;
			margin-bottom: 28rpx;
			padding: 0 30rpx;
			.all-unit {
				font-size: 20rpx;
			}
			.all-money {
				font-size: 32rpx;
				font-weight: bold;
				color: #333333;
				// font-size: 26rpx;
				// color: #333;
				// font-weight: 500;
				// &::before {
				// 	content: '￥';
				// 	font-size: 20rpx;
				// }
			}
		}

		.obtn{
			width: 160rpx;
			height: 64rpx;
			line-height: 64rpx;
			background: #FFFFFF;
			border-radius: 108rpx;
			font-size: 28rpx;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 500;
			color: #999999;
			border: 1rpx solid #999999;
		}

		.obtn1 {

		}
		.obtn2 {

		}
		.obtn3 {
			color: #FC5351;
			border: 1rpx solid #FC5351;
		}
	}
	.order-head {
		padding: 0 20rpx;
		height: 88rpx;
		font-size: 24rpx;
		font-weight: 500;

		.no {
			color: #666666;
		}

		.state {
			color: #FE811C;
		}

		.status{
			font-size: 12px;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 500;
			color: #FE811C;
			line-height: 16px;
		}
	}

	.order-content{
		padding: 0 20rpx;
		margin-bottom: 8rpx;
		display: flex;
		.goods_img{
			width: 200rpx;
			height: 150rpx;
			border-radius: 16rpx;
			margin-right: 20rpx;
		}
		.goods-intro{
			flex-grow: 1;
			.row{
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-bottom: 20rpx;
				.goods-title{
					font-weight: 500;
					color: #333333;
					font-size: 32rpx;
					width: 258rpx;
				}
				.goods-price{
					font-weight: bold;
					color: #333333;
					font-size: 28rpx;
				}
				.goods_sku,.goods-num{
					font-weight: 400;
					color: #777777;
					font-size: 24rpx;
				}
			}
		}
	}
}
</style>
